.root {
  margin: 30px 10px 10px;
  padding: 5px;
  font-size: 24px;
  color: teal;


  .list {
    display: flex;
    justify-content: center;
    gap: 24px;
    list-style-type: none;


    .link {
      padding: 5px 15px;
      box-shadow: 0 0 0 1px rgba(0, 128, 128, 0.5);
      border-radius: 15px;
      cursor: pointer;
      text-decoration: none;
      color: inherit;

      &:hover {
        color: white;
        background-color: rgba(0, 128, 128, 0.4);
        transition: background-color, color .1s;
      }

      &.active {
        color: white;
        background-color: rgba(0, 128, 128, 0.4);
        box-shadow: 0 0 0 5px rgba(0, 128, 128, 0.4);
        transition: background-color, color, box-shadow .1s;
      }
    }
  }
}



